<template>
  <van-nav-bar
    :left-arrow="stepIndex > 0"
    @click-left="stepAction.prev()"
  />

  <div class="step-wrap" v-if="stepIndex > 0 && stepIndex < 4">
    <div class="logo"></div>
    <div class="step-box">
      <div class="step-number" :data-index="stepIndex"></div>
      <div class="step-text" :data-step="stepIndex"></div>
    </div>
  </div>
</template>

<script setup>
  import { stepAction, stepIndex } from '@/stores'
</script>

<style scoped>
  .van-nav-bar {
    background-color: transparent;
    position: fixed;
    width: 100%;
  }

  >>> .van-nav-bar__content {
    height: .46rem !important;
  }

  .van-hairline--bottom:after {
    display: none;
  }

  >>> .van-nav-bar__title {
    color: #fff;
    font-size: .16rem;
    font-weight: normal;
    line-height: normal;
  }

  .van-nav-bar >>> .van-icon {
    color: #333;
    font-size: .26rem;
  }

  .step-wrap {
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: calc(.1rem + 46px);
    padding-left: .3rem;

    .logo {
      width: 1.17rem;
      height: .19rem;
      background: url('@/assets/images/step-bg.png') no-repeat center / 100% 100%;
      margin-bottom: .09rem;
    }

    .step-box {
      display: flex;
      font-weight: bold;
      font-size: .16rem;
      color: #00418F;
      gap: .13rem;
      justify-content: flex-start;
      width: 100%;

      .step-number {
        width: .32rem;
        height: .57rem;

        &[data-index='1'] {
          background: url('@/assets/images/step-number1.png') no-repeat center / 100% 100%;
        }

        &[data-index='2'] {
          background: url('@/assets/images/step-number2.png') no-repeat center / 100% 100%;
        }

        &[data-index='3'] {
          background: url('@/assets/images/step-number3.png') no-repeat center / 100% 100%;
        }
      }
      .step-text {
        width: 1.5rem;
        height: .46rem;

        &[data-step='1'] {
          background: url('@/assets/images/step1-text.png') no-repeat center / 100% 100%;
        }
        &[data-step='2'] {
          background: url('@/assets/images/step2-text.png') no-repeat center / 100% 100%;
        }
        &[data-step='3'] {
          background: url('@/assets/images/step3-text.png') no-repeat center / 100% 100%;
        }
      }
    }
  }
</style>